<template>
  <div class="good-item-info wr" ref="wr">
    <div class="content">
      <div class="item-info-goods">
        <div class="images">
          <img :src="goodsiteminfo[0].ItemImage" alt="图片无法显示" />
        </div>
        <div class="desc">
          <div class="desc-tip">新品秒杀</div>
          <div class="desc-price">
            <span>￥{{ goodsiteminfo[0].price }}</span>
            <span>券后￥{{ goodsiteminfo[0].price - 5 }}</span>
          </div>
          <layoutlcr class="desc-link">
            <span slot="left" class="desc-link-left">金币抵扣</span>
            <span slot="center" class="desc-link-center">红包抵扣</span>
            <span slot="right" class="desc-link-right"
              >领券<i class="el-icon-arrow-right"></i
            ></span>
          </layoutlcr>
          <layoutlcr class="desc-sale">
            <span slot="left">天猫</span>
            <span slot="right">{{ goodsiteminfo[0].sale }}</span>
          </layoutlcr>
          <layoutlcr class="desc-title">
            <span slot="left">{{ goodsiteminfo[0].title }}</span>
          </layoutlcr>
        </div>
        <div class="size-info">
          <layoutlcr class="desc-link">
            <span slot="left" class="desc-link-left">金币抵扣</span>
            <span slot="center" class="desc-link-center">红包抵扣</span>
            <span slot="right" class="desc-link-right"
              >领券<i class="el-icon-arrow-right"></i
            ></span>
          </layoutlcr>
        </div>
        <div class="eval">
          <layoutlcr class="">
            <span slot="left" class="eval-left">宝贝评价（500+）</span>
            <span slot="right" class="eval-right">查看全部<i class="el-icon-arrow-right"></i
            ></span>
          </layoutlcr>

        </div>
        <h1>标题内容</h1>
        <h1>标题内容</h1>
        <h1>标题内容</h1>
        <h1>标题内容</h1>
        <h1>标题内容</h1>
        

      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import GoodItemNavBar from "./GoodItemNavBar.vue";
import layoutlcr from "@/components/common/layout/layout_lcr.vue";
export default {
  name: "GoodItemInfo",
  components: {
    GoodItemNavBar,
    layoutlcr,
  },
  props: {
    goodsiteminfo: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      // sizeImage: require("@/assets/production_images/size.jpg"),
      Scroll: null,
    };
  },
  mounted() {
    this.initscroll();
  },
  methods: {
    initscroll() {
      this.$nextTick(() => {
        if (!this.Scroll) {
          this.Scroll = new BScroll(this.$refs.wr, {
            click: true, // 配置允许点击事件
            scrollY: true, // 开启纵向滚动
          });
        } else {
          this.Scroll.refresh(); // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
        }
      });
    },
  },
};
</script>

<style scoped>
img {
  width: 100%;
  height: 380px;
}
.wr {
  width: 100%;
  position: absolute;
  top: 44px;
  height: calc(100%-93px);
  /* background: green; */
  overflow: hidden;
}
/* 商品部分样式 */
.content .item-info-goods {
  padding: 0 5px 5px;
}
.desc,
.size-info,
.eval {
  margin: 10px auto;
  padding: 10px 5px 5px;
  border: 1px solid grey;
  border-radius: 5px;
  background: #fff;
}

.desc div:nth-child(n) {
  margin: 10px auto;
}
.content .item-info-goods .desc .desc-tip {
  color: orange;
  font-size: 20px;
}

.content .item-info-goods .desc .desc-price span:nth-child(1) {
  font-size: 28px;
  color: orange;
}
.content .item-info-goods .desc .desc-price span:nth-child(2) {
  color: #fff;
  font-size: 28px;
  padding: 5px 20px;
  margin-left: 15px;
  border-radius: 20px;
  display: inline-block;
  background: orange;
}
.desc-link-left {
}

.desc-link-right {
}

.desc-title {
  font-size: 20px;
  font-weight: bold;
  overflow: hidden;
}
</style>